<template>
  <div>
    <h1>查询参数：{{this.$route.query.arg}}</h1>
    <ul>
        <li>姓名：{{name}} <input type="text"> </li>
        <li>年龄：{{age}} <input type="text"></li>
        <li>性别：{{sex}} <input type="text"></li>
        <li>绩点：{{gpa}} <input type="text"></li>
    </ul>
    <div>
      <!-- 嵌套路由 -->
      <router-link tag="button"  to="/student/info">info</router-link>
      <!-- <router-link tag="button" to="/student/edit">edit</router-link> -->

      <!-- 或者写name -->
            <router-link tag="button" :to="{
              name:'studentEditor'
            }">edit</router-link>
            
      <!-- 二级路由显示 -->
      <router-view></router-view>

    </div>
   
  </div>
</template>

<script>


export default {
  name:'StudentView',
  data() {
    return {
        name:'张三',
        age:15,
        sex:'男',
        gpa:4.2
    }
  },
  mounted(){
    console.log(this);
  },
  //需要配合keep-alive使用
     //路由提供的生命周期钩子——组件显示时调用
     activated() {
     console.log("StudentView路由组件显示")
   },
   //路由提供的生命周期钩子——组件隐藏时调用
   deactivated(){
    console.log("StudentView路由组件隐藏")
   }

}
</script>

<style>

</style>